/* 查看同步日志 */
<template>
  <div class="synchronizationJournal">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/interfaceMapping' }">接口映射</el-breadcrumb-item>
      <el-breadcrumb-item>查看同步日志</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="filter">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="签约房号：">
          <el-input v-model="houseNum" placeholder="请输入签约房号"></el-input>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-input v-model="customerName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="同步状态：">
          <el-select v-model="status" placeholder="请选择">
            <el-option :label="item.status" :value="item.value" v-for="item in statusList" :key="item.value"></el-option>
          </el-select>
        </el-form-item><br>
        <span style="font-size:14px;color:#606266">同步时间：</span>
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          @change='changeDate'
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-form-item style="margin-top:-2px;margin-left:10px;">
          <el-button type="primary" @click="handleSynchronization">同步</el-button>
          <el-button type="primary" @click="handleCheck" id="monitorEnter">查询</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        @sort-change="sort"
        style="width: 100%">
        <el-table-column
          fixed
          align="center"
          type="index"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="devName"
          label="楼盘名称"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="customerName"
          label="客户姓名"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="companyName"
          label="渠道公司"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="reportTime"
          label="报备时间"
          width="300">
        </el-table-column>
        <el-table-column
          align="center"
          prop="cellName"
          label="签约房号"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="signTime"
          label="认购时间"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="syncOperator"
          label="同步操作人"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="syncTime"
          sortable
          label="同步时间"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="syncStatus"
          label="同步状态">
          <template slot-scope="scope">
            {{scope.row.syncStatus?'成功':'失败'}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="remark"
          label="操作">
          <template slot-scope="scope">
            <el-button v-show="!scope.row.syncStatus" @click="open(scope.row.remark)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageData.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalSize">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/apiPath"
import util from '@/common/utils'
export default {
  name:"synchronizationJournal",
  title:'查看同步日志',
  components: {},
  data() {
    return {
      totalSize:0,
      pageData:{
        pageSize:10,
        pageNum:1
      },
      statusList:[
        {status:'全部',value:''},
        {status:'失败',value:0},
        {status:'成功',value:1},
      ],
      status:undefined,
      houseNum:'' ,
      customerName:'' ,
      dateValue:[],
      tableData: [],
      beginDate:'',
      endDate:'',
      order:'desc'
    }
  },
  created() {
    this.handleCheck()
  },
  activated(){
    this.handleCheck()
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(val)
      this.pageData.pageSize = val
      this.handleCheck()
    },
    handleCurrentChange(val) {
      this.handleCheck()
    },
    // 查看同步失败的错误信息
    open(val) {
      this.$alert(val, '查看', {
        confirmButtonText: '关闭',
        callback: action => {
          // this.$message({
          //   type: 'info',
          //   message: ``
          // })
        }
      })
    },
    // 查询
    handleCheck(){
      this.axios.post(api.syncJournal,{
        pageNum:this.pageData.pageNum,
        pageSize:this.pageData.pageSize,
        cellName:this.houseNum,
        customerName:this.customerName,
        syncStatus:this.status,
        beginDate:this.beginDate,
        endDate:this.endDate,
        devId:this.$route.query.id,
        orderByStatus:this.order
      }).then(res=>{
        console.log(res)
        this.totalSize = res.data.data.total
        this.tableData = res.data.data.list
        this.tableData.forEach(item=>{
          item.reportTime = util.getTimeString(item.reportTime)
          item.syncTime = util.getTimeString(item.syncTime)
        })
      })
    },
    // 同步
    handleSynchronization(){
      this.axios.get(api.manual+ '/' + this.$route.query.id).then(res=>{
        if(res.data.code == 200){
          this.handleCheck()
          this.$message({
            message: '同步成功',
            type: 'success'
          })
        }
      })
    },
    // 重置
    handleReset(){
      this.houseNum = ''
      this.customerName = ''
      this.status = ''
      this.dateValue = []
      this.beginDate = ''
      this.endDate = ''
    },
    // 排序
    sort(val){
      console.log(val)
      let {column,prop,order} = val
      if(prop && val.order){
        if(order == 'ascending'){
          this.order = 'asc'
        } else if (order == 'descending') {
          this.order = 'desc'
        }
        this.handleCheck()

      }else {
        this.order = ''
        this.handleCheck()
      }
    },
    // 日期改变
    changeDate(val){
      if(val){
        this.beginDate = val[0].getTime()
        this.endDate = val[1].getTime()
      }else{
        this.beginDate = ''
        this.endDate = ''
      }
    },
  },
  computed: {}
}
</script>
<style lang="stylus" scoped>
  .synchronizationJournal {
    .bread-title{
      height:30px;
      font-size:16px;
    }
    .block{
      margin-top :20px;
    }
  }
</style>